<template>
    <h2>显示 查询 分页</h2>
    房型名称
    <input type="text" v-model="name"/>
    <input type="button" value="查询" @click="Show"/>
    <table border="1">
        <thead>
            <tr>
                <td>房型编号</td>
                <td>房型名称</td>
                <td>售价</td>
                <td>面积</td>
                <td>可住人数</td>
                <td>图片</td>
                <td>介绍</td>
                <td>可否加床</td>
                <td>可含早餐</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{item.tId}}</td>
                <td>{{item.tName}}</td>
                <td>{{item.tMoney}}</td>
                <td>{{item.tMianJi}}</td>
                <td>{{item.person}}</td>
                <td><img :src="item.imgurl" style="height:70px;width:70px;"/></td>
                <td>{{item.tInfo}}</td>
                <td>{{item.isChuang==true?"免费加床":"不可加床"}}</td>
                <td>{{item.isBreakFast==true?"含早":"不含早"}}</td>
                <td>
                    <input type="button" value="删除" @click="Shan(item.tId)"/>
                </td>
            </tr>
        </tbody>
    </table>

    总共有{{pageinfo.totalCount}}条数据
    总共有{{pageinfo.pageCount}}页
    当前在{{pageinfo.PageIndex}}/{{pageinfo.pageCount}}页

    <a href="#" @click="FanYe('F')" style="margin-left:20px;">首页</a>
    <a href="#" @click="FanYe('L')" style="margin-left:20px;">上一页</a>
    <a href="#" @click="FanYe('N')" style="margin-left:20px;">下一页</a>
    <a href="#" @click="FanYe('E')" style="margin-left:20px;">尾页</a>

</template>
<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import {useRouter,useRoute} from 'vue-router';
    const route=useRoute();
    const router=useRouter();

    const info=ref([{
        tId:0,
        tName: "",
        tMoney: 0,
        tMianJi: 0,
        person: 0,
        imgurl: "",
        tInfo: "",
        isChuang: true,
        isBreakFast: true
    }]);

    onMounted(()=>{
        Show();
    })
    const name=ref("");
    const pageinfo=ref({
        PageIndex:1,
        PageSize:2,
        totalCount:0,
        pageCount:0
    });
    const Show=()=>{
        axios.get("https://localhost:7029/api/RoomType/GetTypeByPage/GetTypeByPage",{
            params:{
                name:name.value,
                PageIndex:pageinfo.value.PageIndex,
                PageSize:pageinfo.value.PageSize
            }
        })
        .then(res=>{
            console.log(res.data);
            info.value=res.data.page_Info;
            pageinfo.value.totalCount=res.data.totalCount;
            pageinfo.value.pageCount=res.data.pageCount;
        })
        .catch(err=>{
            console.log(err);
        })
    }

    const FanYe=(choose:any)=>{
        switch(choose){
            case 'F':
                pageinfo.value.PageIndex=1;
            break;
            case 'L':
                if(pageinfo.value.PageIndex<1+1){
                    alert('已经是第一页啦');
                    return;
                }
                pageinfo.value.PageIndex--;
            break;
            case 'N':
                if(pageinfo.value.PageIndex>pageinfo.value.pageCount-1){
                    alert('已经是最后一页啦');
                    return;
                }
                pageinfo.value.PageIndex++;
            break;
            case 'E':
                pageinfo.value.PageIndex=pageinfo.value.pageCount;
            break;
        }
        Show();
    }

    const Shan=(id:number)=>{
        if(confirm("确定要删除吗？")){
            axios.get("https://localhost:7029/api/RoomType/Shanchu/Shanchu",{
                params:{
                    id:id
                }
            })
            .then(res=>{
                if(res.data>0){
                    alert('删除成功');
                    Show();
                }
                else{
                    alert('删除失败');
                }
            })
            .catch(err=>{
                console.log(err);
            })
        }
    }

</script>
